<template>
  <div class="middle">
    <button type="button" class="btn btn-primary btn-sm" @click="toClub">返回</button>
    <br><br>
    <table class="table table-hover">
      <thead>
        <tr>
          <th scope="col">Tid</th>
          <th scope="col">Type</th>
        </tr>
      </thead>

      <tbody>
        <tr v-for="(Type, index) in types" :key="index">
          <td>{{ Type.tid }}</td>
          <td>{{ Type.name }}</td>
          
        </tr>
      </tbody>
    </table>
  </div>
</template>
<style scoped>
.middle{
  width: 30%;
  padding-top: 10%;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}
</style>
<script>
import axios from 'axios';


export default {
  data() {
    return {
      types:[],
    }
  },
  methods:{
    toClub(){
      this.$router.push('/')
    },
    getTypes() {
      const path = '/api/getType';
      axios.get(path)
        .then((res) => {
          console.log(res.data)
          this.types = res.data;
          // alert(res.data[1])
        })
        .catch((error) => {
          console.error(error);
        });
    },
  },
  created() {
    let that = this
    this.getTypes();
  },
  
};
</script>
